<template>
  <view class="Ectronic">
    <view class="hrader">
      <image
        src="../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      电子功德箱
    </view>
    <view class="sec1">
      <view class="wrap">
        <view class="btn" @click="templeClcik(1)">寺院修建</view>
        <view class="btn" @click="templeClcik(2)">消灾祈福</view>
        <view class="btn" @click="templeClcik(3)">弘法利生</view>
        <view class="btn" @click="templeClcik(4)">还愿报恩</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    gobackClick() {
      uni.switchTab({
        url: "../index/index",
      });
    },
    //寺院修建
    templeClcik(type) {
      uni.navigateTo({
        url: "../Temple/Temple?type=" + type,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #fff;
}
.Ectronic {
  .hrader {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    .goback {
      position: absolute;
      width: 22rpx;
      height: 34rpx;
      left: 28rpx;
    }
  }
  .sec1 {
    width: 100%;
    height: calc(100vh - 88rpx);
    background: url(../../static/gdxbg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .wrap {
      width: 582rpx;
      height: 678rpx;
      background: url(../../static/gdxWp.png) no-repeat;
      background-size: 100% 100%;
      margin: 209rpx auto 0;
      overflow: hidden;
      box-sizing: border-box;
      padding-top: 150rpx;
      .btn {
        width: 294rpx;
        height: 74rpx;
        background: url(../../static/gdxbtn.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 74rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #ffffff;
        margin: 0 auto 58rpx;
      }
    }
  }
}
</style>
